import { ReactNode } from "react";
import { useToggle, useUpdateEffect } from "ahooks";
import { Radio, View } from "@tarojs/components";
import ByIcon from "./ByIcon";

type ByRadioProps = {
  value?: string | number;
  disabled?: boolean;
  checkedColor?: string;
  uncheckedColor?: string;

  className?: string;
  checked?: boolean;
  children?: ReactNode;
};

type ByRadioEvents = {
  onChange?: (checked: boolean) => void;
};

export default ({
  value,
  checkedColor = "var(--color-primary)",
  uncheckedColor = "#999",
  checked = false,
  disabled,
  children,
  className,

  onChange,
}: ByRadioProps & ByRadioEvents) => {
  return (
    <View className={`relative inline-flex ${className}`}>
      <ByIcon
        size={36}
        name={checked ? "CheckFill" : "UnChecked"}
        color={checked ? checkedColor : uncheckedColor}
      />

      <View className="ml-1">{children}</View>

      <Radio
        className="absolute top-0 left-0 w-full h-full opacity-0"
        value={value + ""}
        checked={checked}
        disabled={disabled}
        onClick={() => onChange?.(!checked)}
      />
    </View>
  );
};
